import Taro, { Component } from '@tarojs/taro'
import {View, Input, Button, Text, Image} from '@tarojs/components'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'

import '../login/login.less'
import eye from "../../assets/img/icon_01.png";
import eye_on from "../../assets/img/icon_01_on.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class ForgetPassword extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    oldEye: false,
    currentEye: false,
    currentCenterEye: false,
    oldImg: eye,
    currentImg: eye,
    currentCenterImg: eye,
    focus: 'oldPassword',
    oldPassword: null,
    password: null,
    passwordCenter: null,
    isComplete: true,
    oldType: 'password',
    currentType: 'password',
    currentCenterType: 'password',
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'密码修改' })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // input聚焦
  inputFocus (type: string = 'password') {
    this.setState({
      focus: type
    })
  }

  toggleEye (type: string) {
    this.setState({
      [type]: !this.state[type]
    }, () => {
      let  eyeImg = this.state[type] ? eye_on : eye
      let  passwordType = this.state[type] ? 'text' : 'password'
      this.setState({
        [type+'Img']: eyeImg,
        [type+'Type']: passwordType
      })
    })
  }

  inputChange (type: string,e) {
    this.setState({
      [type]: e.target.value
    }, () => {
      let { oldPassword, password,passwordCenter } = this.state
      if(oldPassword && password && passwordCenter){
        this.setState({
          isComplete: false
        })
      }else {
        this.setState({
          isComplete: true
        })
      }
    })
  }

  formSubmit() {
    let { oldPassword,password,passwordCenter } = this.state
    if(!oldPassword){getRuntime().showToast('请填写旧密码~'); return false}
    if(!password){getRuntime().showToast('请填写密码~'); return false}
    if(password!==passwordCenter ){getRuntime().showToast('两次输入密码不一致~'); return false}

    let { userStore } =  this.props.stores
    userStore.updateUserPassword({
      form: {
        oldPassword,
        newPassword: password,
      },
      callback: () => {
        getRuntime().showToast('修改密码成功~')
      }
    })
  }

  render () {
    let { focus,oldImg,currentImg,currentCenterImg,oldType,currentType,currentCenterType,isComplete } = this.state
    return (
      <View className='login-wrap'>
       <View>
         <View className={focus === 'oldPassword' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>原密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={oldType}
                  name='oldPassword'
                  onFocus={this.inputFocus.bind(this, 'oldPassword')}
                  onChange={this.inputChange.bind(this,'oldPassword')}
           />
           <Image className='eye' src={oldImg} onClick={this.toggleEye.bind(this,'old')} />
         </View>

         <View className={focus === 'password' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>新密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={currentType}
                  name='oldPassword'
                  onFocus={this.inputFocus.bind(this, 'password')}
                  onChange={this.inputChange.bind(this,'password')}
           />
           <Image className='eye' src={currentImg} onClick={this.toggleEye.bind(this,'current')} />
         </View>

         <View className={focus === 'passwordCenter' ? 'input-group input-group-on' : 'input-group'}>
           <Text className='input-title'>确认新密码</Text>
           <Input className='input'  placeholderClass='placeholder-class' placeholder='请输入登录密码' type={currentCenterType}
                  name='oldPassword'
                  onFocus={this.inputFocus.bind(this, 'passwordCenter')}
                  onChange={this.inputChange.bind(this,'passwordCenter')}
           />
           <Image className='eye' src={currentCenterImg} onClick={this.toggleEye.bind(this,'currentCenter')} />
         </View>

         <Button className={isComplete ? 'btn-submit' : 'btn-submit  btn-submit-on'} type='primary' onClick={this.formSubmit.bind(this)} disabled={isComplete}>确定修改</Button>

         <View className='back-login' onClick={this.handelRouter.bind(this, '/pages/login/forget_password')}>其他方式</View>
       </View>

      </View>
    )
  }
}

export default ForgetPassword
